<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>童趣玩具店</title>
</head>
<!-- 引入ElementUI的样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
    /*
           设置body样式

       */
    body {
        margin: 0px; /*设置上下左右空白距离为0*/
    }

    /*
        设置index-container  div样式
    */
    .index-container {
        margin: 0 auto; /*设置div居中*/
        width: 85%; /*设置宽度,使用百分比设置*/
        min-width: 1024px; /*设置最小宽度*/
    }

    /*
           ElementUI提供的样式
           设置el-header，el-footer两个标签的样式

       */
    .el-header, .el-footer {
        background-color: #606266;
        color: #333;
        line-height: 60px;
    }

    .el-header {
        background-color: lightblue;
        display: flex;
    }

    .el-footer {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        font-family: 宋体;
        letter-spacing: 3px;
        color: white;

    }

    .el-header .logo {
        border: 0px solid red;
        width: 50%;
        height: 100%;
        padding-left: 50px;
    }

    .logo span {
        margin-top: -30px;
        position: relative;
        top: -17px;
        display: inline-block;
        border: 0px solid red;
        height: 100%;
        line-height: 60px;
        font-size: 30px;
        font-weight: bold;
    }

    .el-header .user_info {
        border: 0px solid blue;
        width: 50%;
        height: 100%;
        text-align: right;
        padding-right: 30px;
    }


    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        overflow: hidden;
    }

    /**
      ElementUI提供的样式
      设置el-main样式
     */
    .el-main {
        /*background-color: #E9EEF3;*/
        color: #333;
    }


    a:link {
        text-decoration: none;
        color: dodgerblue;
        font-weight: bold;
    }

    a:visited {
        text-decoration: none;
        color: dodgerblue;
        font-weight: bold;
    }

    a:hover {
        color: red;
        font-weight: bold;
    }


</style>
<body>
<div id="index-container" class="index-container">
    <el-container>
        <el-header>
            <div class="logo">
                <img src="/toyshopping/images/logo.png" style="height:60px ">
                <span>童趣玩具店</span>
            </div>
            <div class="user_info">


                <div class="user_info_div">
                        <span style="margin-right:10px">
                            <label style="color: red">欢迎您:</label>
                            <label style="color: blue">{{admin.admin_name}}</label>
                        </span>

                    <el-button type="danger" plain size="mini" @click="exit">退出</el-button>
                </div>

            </div>
        </el-header>
        <!--商品信息展示区-->
        <el-container>

            <el-aside width="200px">

                <el-menu

                        class="el-menu-vertical-demo"
                        default-active="/toyshopping/manager/toyManager.html"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        @select="selectMenu">

                    <el-menu-item index="/toyshopping/manager/userManager.html">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">用户管理</span>

                    </el-menu-item>

                    <el-menu-item index="/toyshopping/manager/toyManager.html">
                        <i class="el-icon-shopping-bag-1"></i>
                        <span slot="title">商品管理</span>

                    </el-menu-item>


                    <el-menu-item index="/toyshopping/manager/orderManager.html">
                        <i class="el-icon-s-goods"></i>
                        <span slot="title">订单管理</span>
                    </el-menu-item>

                    <el-menu-item index="/toyshopping/manager/messageManager.html">
                        <i class="el-icon-s-goods"></i>
                        <span slot="title">留言管理</span>
                    </el-menu-item>


                </el-menu>
            </el-aside>

            <el-main>
                <div style="margin-bottom: 20px">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>
                            <a href="/toyshopping/manager/index.html">首页</a>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>留言管理</el-breadcrumb-item>

                    </el-breadcrumb>
                </div>

                <div class="messageList">
                    <el-table
                            :data="messageList"
                            height="250"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="id"
                                label="序号"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="author"
                                label="名字">
                        </el-table-column>
                        <el-table-column
                                prop="message"
                                label="留言">
                        </el-table-column>
                        <el-table-column
                                prop="mtime"
                                label="时间"
                                width="160">
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
        </el-container>
        <el-footer>童趣玩具店所有</el-footer>
    </el-container>

</div>

</body>
<script src="/toyshopping/js/vue.min.js"></script>
<script src="/toyshopping/js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/toyshopping/js/sweetalert2.js"></script>
<script>
    /**
     * 创建Vue对象，并对vue进行配置
     * 在vue的构造器中配置
     */
    new Vue({
        //用于配置vue要渲染的元素,在el指定的元素中vue可以起作用,脱离指定元素，vue无效,vue的渲染元素可以为任意元素，一般是div
        el: '#index-container',
        data() {//vue的数据区，等同于java类中的属性
            return {
                admin: null,//当前登录者对象
                messageList: [],//留言列表
            }
        },
        methods: {//vue的方法区,在方法区中定义方法，这些方法类似与java中的方法
            /**
             * 获得当前登录者信息
             */
            getCurUser() {
                //从sessionStorage中获得curUser的值，值为一个字符串
                let adminStr = window.sessionStorage.getItem("admin");
                if (adminStr) {
                    //将JSON格式的字符串解析为一个JSON对象
                    this.admin = JSON.parse(adminStr);
                    // console.log(this.curUser.user_name);
                }

            },
            /**
             * 退出登录
             */
            exit() {
                //使用ajax向服务端发送退出请求
                axios.delete('/toyshopping/manager/admin/exit')
                    .then(response => {
                        let result = response.data;
                        if (result.success) {
                            //将浏览器的sessionStorage中存储的用户登录信息移除
                            window.sessionStorage.removeItem("admin");//根据key移除对应的属性
                            //使用ElementUI的弹框组件实现
                            this.$message({
                                message: result.message,
                                type: 'success',
                                duration: 500,//设置延迟关闭时间(毫秒)
                                onClose: () => {//当弹框关闭后要执行的函数
                                    location.href = "/toyshopping/manager/login.html";
                                }
                            });
                        }
                    })
                    .catch(err => {
                        alert(err);
                    });
            },

            selectMenu(index) {
                location.href = index;
            },
            /***
             *获得留言
             */
            getMessageList() {
                this.messageList = [];
                axios.get('message/getAll2',this.messageList)
                    .then(response => {
                        this.messageList = response.data;
                    })
                    .catch(err => {
                        alert(err);
                    });
            },

        },
        mounted() {
            this.getCurUser();
            this.getMessageList();
        }
    });
</script>
</html>